<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2025/8/30
  Time: 23:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>供应商管理系统 - 登录</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    body {
      background-color: #f5f5f5;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-wrapper {
      width: 100%;
      max-width: 400px;
      padding: 20px;
    }

    .login-container {
      background: white;
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .login-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .login-header h1 {
      color: #333;
      font-size: 24px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    .input-group {
      margin-bottom: 20px;
    }

    .input-group input {
      width: 100%;
      height: 40px;
      padding: 0 15px;
      border: 1px solid #ddd;
      border-radius: 3px;
      font-size: 14px;
    }

    .input-group input:focus {
      outline: none;
      border-color: #4a90e2;
    }

    .login-btn {
      width: 100%;
      height: 40px;
      background-color: #4a90e2;
      color: white;
      border: none;
      border-radius: 3px;
      font-size: 16px;
      cursor: pointer;
    }

    .login-btn:hover {
      background-color: #3a80d2;
    }

    .error-message {
      color: #e74c3c;
      font-size: 12px;
      margin-top: 10px;
      text-align: center;
      display: none;
    }

    .footer {
      margin-top: 20px;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function() {
      // 为登录按钮添加点击事件
      $("input[name='login']").on("click", function() {
        var account = $('input[name="account"]').val();
        var password = $('input[name="password"]').val();

        // 简单的表单验证
        if (!account || !password) {
          $('.error-message').text('请输入账号和密码').show();
          return;
        }

        $('.error-message').hide();

        // 发送登录请求
        $.get("userlogin/userLogin", {
          'account': account,
          'password': password
        }, function(boo) {
          if (boo) {
            alert("登录成功");
            window.location.href = "info.jsp?account="+account;//*?account="+account*/
          } else {
            $('.error-message').text('登录失败，用户名或密码错误').show();
          }
        }).fail(function() {
          $('.error-message').text('网络错误，请稍后重试').show();
        });
      });

      // 回车键登录
      $(document).on('keypress', function(e) {
        if (e.which === 13) { // 回车键
          $("input[name='login']").click();
        }
      });

      // 输入时隐藏错误信息
      $('input[name="account"], input[name="password"]').on('input', function() {
        $('.error-message').hide();
      });
    });
  </script>
</head>
<body>
<%--<%
  Cookie[] cookies = request.getCookies();//管请求对象要cooki值
  for (int i = 0; i <cookies.length ; i++) {
    if (cookies[i].getName().equals("user")){
      request.getRequestDispatcher("provode/showdt").forward(request,response);
    }
  }
%>--%>
<div class="login-wrapper">
  <div class="login-container">
    <div class="login-header">
      <h1>供应商管理系统</h1>
    </div>

    <div class="input-group">
      <input type="text" name="account" placeholder="请输入账号" autocomplete="username">
    </div>

    <div class="input-group">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="current-password">
    </div>

    <input type="button" name="login" value="登录" class="login-btn">

    <div class="error-message" id="errorMsg"></div>

    <div class="footer">
      © 2025 供应商管理系统 | 企业版
    </div>
  </div>
</div>
</body>
</html>